<style lang="less">
  #div_truckload_order_driver_message {
    .div-header {
      border-left: 2px solid #cbcbcb;
      height: 24px !important;
    }
  }
</style>

<template>
  <div id="div_truckload_order_driver_message">
    <el-row v-if="truckLoadDriverBaseVO!=null">
      <el-col :span="11">
        <el-header class="div-header">司机信息</el-header>
        <el-main>
          <el-col :span="6">
            <img width="65px" style="border-radius: 50%;width: 70%;"
                 v-if="truckLoadDriverBaseVO.driverHeadUrl!=null"
                 v-bind:src="truckLoadDriverBaseVO.driverHeadUrl"/>
            <img v-if="truckLoadDriverBaseVO.driverHeadUrl==null" style="width: 70%;"
                 src="../../assets/truck-load-driver-default-icon.png"/>
          </el-col>
          <el-col :span="18">
            <P>
              <label>{{truckLoadDriverBaseVO.driverName}}</label> |
              <label>{{truckLoadDriverBaseVO.driverPhone}}</label>
            </P>
            <P>
              <label>{{truckLoadDriverBaseVO.plateNumber}}</label> |
              <label>{{truckLoadDriverBaseVO.vehicleType}}</label> |
              <label>{{truckLoadDriverBaseVO.vehicleLength}}米 </label> |
              <label>{{truckLoadDriverBaseVO.loadTon}}吨 </label> |
              <label>{{truckLoadDriverBaseVO.loadParty}}方 </label>
            </P>
            <P>
              最新位置： <label>{{truckLoadDriverBaseVO.location}}</label>
            </P>
          </el-col>
        </el-main>
      </el-col>
      <el-col :span="11">
        <el-header class="div-header">运费信息</el-header>
        <el-main>
          <p>给货主的报价：{{truckLoadDrive.negotiatePrice}}元</p>
          <p>给司机的车价：{{truckLoadDrive.driverPrice}}元</p>
          <p>应收信息费：{{truckLoadDrive.infoPrice}}元</p>
        </el-main>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col style="text-align: center">该订单暂无司机信息</el-col>
    </el-row>
  </div>
</template>

<script>
import { isEmpty } from '../../lib/util.js';

export default {
  name: 'TruckLoadOrderDriverMessage',
  props: {
    truckLoadDrive: {
      type: Object,
      required: true
    }
  },
  watch: {
    truckLoadDrive (val) {
      console.log(val);
      if (!isEmpty(val)) {
        this.truckLoadDriverBaseVO = val.truckLoadDriverBaseVO;
      }
    }
  },
  data () {
    return {
      truckLoadDriverBaseVO: {
        driverHeadUrl: null,
        driverName: null,
        driverPhone: null,
        plateNumber: null,
        vehicleType: null,
        vehicleLength: null,
        loadTon: null,
        loadParty: null,
        location: null
      }
    };
  },
  methods: {},
  mounted () {}
};
</script>
